<template>
  <div class="main">
    <div class="table">
      <el-table
        v-if="notices"
        :data="currentContent"
        stripe
        height="100%"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        header-cell-class-name="th"
        row-class-name="row"
      >
        <el-table-column align="center" prop="title" label="标题" width="260">
        </el-table-column>
        <el-table-column
          align="center"
          prop="content"
          label="内容"
          width="1100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="created_date"
          sortable
          label="发布时间"
          width="200"
        >
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="medium "
              type="danger"
              @click="handleDelete(scope.row.id, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="total"
      :pager-count="5"
      style="text-align: center"
      @current-change="changeIdx"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { getNotice, deleteNotice } from "@network/manager";
export default {
  data() {
    return {
      notices: null,
      total: 0,
      activeIndex: 0,
      line: 10,
    };
  },
  computed: {
    currentContent() {
      let begin = this.activeIndex * this.line,
        end = (this.activeIndex + 1) * this.line;
      console.log(
        this.notices.slice(this.activeIndex * this.line, this.line),
        "index"
      ),
        this.activeIndex;
      return this.notices.slice(begin, end);
    },
  },
  methods: {
    ...mapMutations(["setNotice"]),
    changeIdx(idx) {
      this.activeIndex = idx - 1;
      console.log(
        "changeIdx",
        this.activeIndex,
        this.notices,
        this.notices.slice(this.activeIndex * this.line, this.line)
      );
    },
    getNotice() {
      getNotice().then((res) => {
        if (res.data.tag) {
          this.$set(this, "notices", res.data.data);
          this.total = Math.ceil(this.notices.length / this.line);
          console.log("notices", this.notices);
        } else {
          this.$message.error("获取公告数据失败");
        }
      });
    },
    deleteNotice(id, index) {
      deleteNotice({ id }).then((res) => {
        if (res.data.tag) {
          this.notices.splice(index, 1);
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    handleDelete(id, index) {
      this.$confirm("确定删除该公告?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.deleteNotice(id, index);
        })
        .catch(() => {
          this.$message.warning("已取消");
        });
      console.log(`公告id${id},位于数据下标${index}`);
    },
  },
  activated() {
    this.setNotice("公告管理");
    this.getNotice();
  },
};
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 88vh;
}

.table {
  height: 760px;
  overflow: auto;
}

/deep/ .row {
  font-size: 18px;
  height: 70px;
  box-sizing: border-box;
}

/deep/ .th {
  height: 60px;
}
</style>
